<template>
  <view class="order-card">
    <view class="title-wrap">
      <text class="title">我的订单</text>
      <view class="right-wrap">
        <text class="label">全部订单</text>
        <u-icon name="arrow-right" color="#666666"></u-icon>
      </view>
    </view>
    <view class="type-list">
      <view class="item">
        <u-icon name="obligation" custom-prefix="ioifont" size="60" color="#32D088"></u-icon>
        <text class="text">待付款</text>
      </view>
      <view class="item">
        <u-icon name="shipments" custom-prefix="ioifont" size="60" color="#32D088"></u-icon>
        <text class="text">待发货</text>
      </view>
      <view class="item">
        <u-icon name="daishouhuo" custom-prefix="ioifont" size="60" color="#32D088"></u-icon>
        <text class="text">待收货</text>
      </view>
      <view class="item">
        <u-icon name="feedback" custom-prefix="ioifont" size="60" color="#32D088"></u-icon>
        <text class="text">待评价</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data () {
      return {
        
      }
    }
  }
</script>

<style lang="scss" scoped>
  .order-card {
    height: 260rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    .title-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx;
      .title {
        font-size: 28rpx;
        color: #000000;
        font-weight: bold;
      }
      .right-wrap {
        color: #666;
        display: flex;
        align-items: center;
        .label {
          font-size: 24rpx;
        }
      }
      
    }
    .type-list {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        .icon {
          width: 40rpx;
          height: 40rpx;
        }
        .text {
          margin-top: 6rpx;
          font-size: 24rpx;
          color: #000000;
        }
      }
    }
  }
</style>
